<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>炫酷花朵</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- 在这里创建一个canvas元素，用于绘制图形 -->
    <canvas id="c"></canvas>
    
    <!-- 开始JavaScript脚本 -->
    <script>
        // 获取canvas元素及其上下文
        var C = document.getElementById("c");
        var Ctx = C.getContext("2d");
        
        // 设置canvas的宽度和高度
        var Cw = C.width = window.innerWidth,
            Cx = Cw / 2;
        var Ch = C.height = window.innerHeight,
            Cy = Ch / 2;
 
        // 创建一个临时canvas元素及其上下文，用于绘制花瓣
        var c = document.createElement("canvas");
        var ctx = c.getContext("2d");
        var cw = c.width = 400,
            cx = cw / 2;
        var ch = c.height = 400,
            cy = ch / 2;
        
        // 定义一些绘制花朵所需要的变量
        var rad = Math.PI / 180;
        var frames = 0;
        var stopped = true;
        var Rx = 150,
            Ry = 150,
            kx = 3,
            ky = 4,
            x, y, x1, y1, x2, y2, t;
        var petals = 7;
 
        // 设置临时canvas的线条宽度
        ctx.lineWidth = .25;
 
        // 将坐标原点移动到canvas中心，并缩放画布
        Ctx.translate(Cw / 2, Ch / 2);
        Ctx.scale(.75, .75);
 
        // 定义绘制函数
        function Draw() {
            // 更新帧数
            frames += .3;
            
            // 清空整个canvas
            Ctx.clearRect(-Cw, -Ch, 2 * Cw, 2 * Ch);
            
            // 计算花朵的路径
            t = frames * rad;
            rx = Rx * Math.abs(Math.cos(t)) + 50;
            ry = Ry * Math.abs(Math.sin(t)) + 50;
 
            x = cx + rx * Math.sin(kx * t + Math.PI / 2);
            y = cy + ry * Math.sin(ky * t + Math.PI / 2);
 
            x1 = cx + rx * Math.sin(kx * t + Math.PI);
            y1 = cy - ry * Math.sin(ky * t + Math.PI);
 
            x2 = cx + rx * Math.sin(kx * t);
            y2 = cy - ry * Math.sin(ky * t);
 
            // 绘制花朵的路径曲线
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.quadraticCurveTo(x1, y1, x2, y2);
            ctx.strokeStyle = "hsl(" + (frames % 360) + ", 100%, 50%)";
            ctx.stroke();
            ctx.globalCompositeOperation = "lighter";
 
            var img = c;
 
            // 绘制花瓣
            for (var i = 0; i < petals; i++) {
                Ctx.globalCompositeOperation = "source-over";
                Ctx.drawImage(img, -200, -400);
                Ctx.rotate(2 * Math.PI / petals);
            }
 
            // 请求下一帧绘制
            requestId = window.requestAnimationFrame(Draw);
        }
 
        // 开始动画
        function start() {
            requestId = window.requestAnimationFrame(Draw);
            stopped = false;
        }
 
        // 停止动画
        function stopAnim() {
            if (requestId) {
                window.cancelAnimationFrame(requestId);
            }
            stopped = true;
        }
 
        // 在页面加载完成后开始动画
        window.addEventListener("load", function() {
            start();
        }, false);
 
        // 清空临时canvas并重新开始动画
        function cleanSlate() {
            ctx.clearRect(0, 0, cw, ch);
            stopped = true;
            start();
            
            // 30秒后停止动画
            window.setTimeout(function() {
                stopAnim();
            }, 30000);
        }
 
        // 30秒后停止动画
        window.setTimeout(function() {
            stopAnim();
        }, 30000);
 
        // 点击canvas时清空临时canvas并重新开始动画
        C.addEventListener("click", function() {
            cleanSlate();
        }, false);
    </script>
</body>
</html>